import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "@/assets/index.css"
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

// 全局引入图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; // 引入NProgress的CSS样式

NProgress.configure({
    easing: 'ease',  // 动画方式    
    speed: 1000,  // 递增进度条的速度    
    showSpinner: true, // 是否显示加载ico    
    trickleSpeed: 500, // 自动递增间隔    
    minimum: 0.5 // 初始化时的最小百分比
})

//当路由进入前
router.beforeEach((to, from, next) => {
    // 每次切换页面时，调用进度条
    NProgress.start();
    // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
    next();
});
//当路由进入后：关闭进度条
router.afterEach(() => {
    // 在即将进入新的页面组件前，关闭掉进度条
    NProgress.done()
})




const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
const app = createApp(App);


app.config.errorHandler = (err, instance, info) => {
    // 检查错误类型，如果是目标错误则忽略
    if (err.message.includes("Cannot read properties of null (reading 'querySelector')")) {
        console.warn('Ignoring querySelector error:', err);
    } else {
        // 处理其他错误
        console.error('An unexpected error occurred:', err);
    }
};


// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(router);
app.use(ElementPlus);
app.use(pinia);
app.mount("#app");



